<template>
  <div class="home-wrapper">
    <div class="list_box">
      <el-card shadow="always" :body-style="{ padding: '0px' }">
        <div>
          <el-input v-model="input" placeholder="请输入设备代码"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div class="list_item">
          <div class="yz_box">
            <div
                            class="yz_item"
                            v-for="(item, index) in allData"
                            :key="index"
                          >
                            <div class="yz_img">
                              <img src="../../assets/img/node0.png" alt="" />
                            </div>
                            <div class="yz_txt">
                              <p class="yz_title">{{ item.factorName }}({{ item.unit }})</p>
                              <p class="yz_desc">{{item.data}}</p>
                            </div>

                            <el-popover
                              class="yz_pop"
                              placement="right"
                              width="104"
                              trigger="click"
                            >
                              <div class="yz_btnlist">
                                <div @click="openChangeYz(item)">修改因子信息</div>
                              </div>

                              <el-button slot="reference"
                                ><i class="el-icon-search yz_search"></i
                              ></el-button>
                            </el-popover>
                </div>

          </div>
        </div>
      </el-card>
    </div>
    <el-card class="right_sb" shadow="always" :body-style="{ padding: '0px' }">
      <div class="list_item">
        <div class="title">设备列表</div>
        <div class="scroll_box">
          <EleTree v-if="isTree" :treeData="treeData" v-on:listenToChildEvent="changeList" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import EleTree from "@/components/tree/EleTree.vue";
import Map from "@/components/map/proMap.vue";
export default {
  name: "Home",
  components: { EleTree, Map },
  data() {
    return {

      input: "",
      isTree:false,
      treeData:[],
      choseId:'',
      userInfo:{},
      allData: {},
    };
  },
  mounted(){
    this.treeData = JSON.parse(localStorage.getItem('treeData'));
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.isTree = true;
    this.choseId = this.treeData[0].children[0].label;
    this.getRealDataByAddress();
  },
  methods: {

    //获取实时数据
    getRealDataByAddress(){
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/data/getRealDataByDevice",
          params: {
            userId: this.userInfo.id,
            address:this.choseId
          },
        })
        .then((res) => {
          console.log(res);
          this.allData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //监听树状图点击事件，切换数据源
    changeList(res) {
      this.choseId = res.label;
      this.getRealDataByAddress();
    },
  },
};
</script>

<style scoped lang="less">
@import "../../assets/less/home";
.home-wrapper {
  position: relative;
  .list_box {
    margin-top: 20px;
    width: calc(100% - 250px) !important;
    height: calc(100% - 50px);
    float: left;
    padding: 0;
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: calc(100% - 52px);
    }
    .yz_item{
      width: calc(20% - 12px) !important;
    }
    @media screen and (max-width: 1500px){
        .yz_item {
          width: calc(33% - 10px) !important;
        }
    }
  }
  .right_sb{
    position: absolute;
    right: 0;
    top: 20px;
    width: 240px;
    height: calc(100% - 50px);
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: 100%;
    }
    .scroll_box{
      height: calc(100% - 30px);
    }
  }
  .el-input {
    width: 200px;
    margin: 10px 10px;
  }
}
</style>
